<template>
     <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
        <van-popup
      v-model:show="show1"
      position="bottom"
      :style="{ height: '35%' }"
    >
      <div class="choiceSex">
        <p @click="lookOver(1)">查看</p>
        <p @click="compile">编辑</p>
        <p @click="deleteTutorial">删除</p>
      </div>
    </van-popup>
                        <span class="item" v-for="item in list" @click="showPopup1">
                            <div class="item_img"></div>
                            <div class="item_title">
                                <span>扭扭棒郁金香</span>
                            </div>
                            <div class="item_money">
                                <span class="money">0人气</span><br>
                                <span class="payed">0人赞</span>
                            </div>
                        </span>

                    </van-list>
    <van-empty description="空空如也..." />
</template>
<script setup lang="ts">
import { Toast } from "vant";
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive , } from 'vue'
const router = useRouter()
const route = useRoute()
const active = ref(0);
let show1 = ref(false);
const showPopup1 = () => {
  show1.value = true;
  
};
function lookOver(cc:any) {

  show1.value = false;
  router.push({
        path: '/jc_tu',
        query: {
            id: cc
        }
    })
}
function compile() {
console.log('编辑教程');

  show1.value = false;
}
function deleteTutorial() {

  show1.value = false;
}
//图文教程布局 、视频
const list: any = ref([]);
const finished = ref(false);
const refreshing = ref(false);

const count = ref(0);
const loading = ref(false);

const onRefresh = () => {
      setTimeout(() => {
        Toast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
//加载
const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            list.value = [];
            refreshing.value = false;
        }
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }
        loading.value = false;
        Toast.clear()
        if (list.value.length >= 30) {
            finished.value = true;
            Toast({
                duration: 3000,
                message: '加载完毕',
            })
        }
    });

};

</script>
<style scoped>
.item {
    box-sizing: border-box;
    display: inline-block;
    margin: 10px 10px 0px 10px;
    width: 42vw;
    height: 30vh;
    background-color: burlywood;
}

.item_img {
    width: 100%;
    height: 65%;
    background-image: url(@/components/cby/photo/2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}

.item_title {
    /* height: 25%; */
    color: #fdfcf7;
    padding-left: 5px;
}

.item_title>span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    /* font-weight: 500; */
}

.item_money {
    /* height: 10%; */
    padding-left: 5px;
}

.item_money>.money {
    font-size: 10px;
    /* font-weight: 300; */
    color: #a29997;
    padding-right: 10px;
}

.item_money>.payed {
    font-size: 10px;
    color: #a29997;
}
.choiceSex {
  /* width: 100px; */
  height: 100px;
  /* border: 1px solid blue; */
  margin: 0 auto;
  margin-top: 50px;
}
.choiceSex p {
  line-height: 50px;
  border: 1px solid gray;
  text-align: center;
  margin-top: 10px;
  border-radius: 30px;
}
</style>